<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <style>
        *{margin:0;padding:0}.clearfix:after{clear:both;display:block;overflow:hidden;height:0;content:''}
        body{height:100vh;background:#e08283;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
        /*分割线-分割线-分割线-分割线-分割线-分割线-分割线-分割线-分割线-分割线-分割线*/
        .wrap-fenYe{padding:0}
        .fenYe{position:relative;width:800px;margin:0 auto;color:#999;background:#fff}
        .fenYe>span{float:left;padding-top:3px;border:none}
        .fenYe>form{float:right;margin-left:5px}
        .fenYe>form label{font-weight:400;margin-right:10px;color:#999}
        .fenYe>form input[type=text]{width:45px;height:27px;text-align:center;line-height:28px;margin-right:5px;border:1px solid #eee}
        .fenYe>form input[type=submit]{border:none;background:0 0;color:#2b92fc;outline:0}
        .fenYe>ul{float:right;margin-bottom:0}
        .fenYe>ul li{float:left;display:inline-block;padding:3px 10px;border:1px solid #eee;margin-right:10px}
        .fenYe>ul li a{color:#999;min-width:2px;border:none!important;margin-right:0;padding:0}
        .fenYe>ul li a:hover{color:#fff!important}
        .fenYe>ul li.active{background:#2b92fc;border:1px solid transparent}
        .fenYe>ul li.active a{color:#fff}
    </style>

</head>
<body>
<div class="wrap-fenYe">
    <div class="fenYe clearfix">
        <span>1页10条 ，共16页  159条记录</span>
        <form action="">
            <label for="">转到</label><input type="text" name=""><input type="submit" value="确定">
        </form>
        <ul class="clearfix">
            <li><a href="">首页</a></li>
            <li><a href="">上一页</a></li>
            <li class="active"><a href="">1</a></li>
            <li><a href="">下一页</a></li>
            <li><a href="">尾页</a></li>
        </ul>
    </div>
</div>
</body>
</html>
